<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./static/element-plus/index.css" />
  <script src="./static/js/vue.global.js"></script>
  <script src="./static/element-plus/index.full.js"></script>

  <style>
    .el-carousel__item img {
      width: 100%;
      height: 100%;
    }
    .cart-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .cart-item img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    .cart-item p {
      margin: 0;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container>
      <el-header>
        <el-row>
          <el-col span="4" style="display: flex; flex-direction: row; align-items: center;">
            <img src="./static/image/logo.png" style="height: 60px; width: 60px;" />
            <h2>技术社区</h2>
          </el-col>
          <el-col :span="8">
            <el-menu default-active="activeIndex" mode="horizontal" style="border-bottom: none !important">
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">文章</el-menu-item>
              <el-menu-item index="3">课程</el-menu-item>
              <el-menu-item index="4">商城</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="8" style="height: 60px;line-height: 60px;" class="hidden">
            <el-input placeholder="请输入内容">
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-link type="primary" href="./login.html">登录</el-link>
            <el-link type="primary" href="./register.html">注册</el-link>
          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <el-main>
          <el-row>
            <el-col :xs="12" :sm="8" v-for="(product, i) in productList" :key="i">
              <img :src="product.img" style="height: 200px; width: 200px;" />
              <p>{{ product.name }}</p>
              <p>价格：￥{{ product.price }} 库存：{{ product.stock }}件</p>
              <el-button @click="addToCart(product)">加入购物车</el-button>
            </el-col>
          </el-row>
        </el-main>
        <el-aside width="300px">
          <h2>购物车</h2>
          <div v-if="cartItems.length > 0">
            <div v-for="(item, i) in cartItems" :key="i" class="cart-item">
              <img :src="item.img" />
              <p>{{ item.name }}</p>
              <p>单价：￥{{ item.price }}</p>
              <p>数量：{{ item.quantity }}</p>
            </div>
            <el-divider style="margin: 10px 0;" />
          </div>
          <div v-else>
            <el-empty description="暂无商品"></el-empty>
          </div>
        </el-aside>
      </el-container>

      <el-footer>
        <el-row>
          <el-col :xs="24" :lg="8">
            <div>
              <img src="./static/image/logo.png" style="height: 60px; width: 60px;" />
              <h2>技术社区</h2>
              <p>致力于构建一个专业的IT技术交流社区</p>
            </div>
          </el-col>
          <el-col :xs="24" :lg="8">
            <div style="display: flex; flex-direction: column; align-items: flex-start;">
              <div style="display: flex; gap: 10px;">
                <el-link>首页</el-link>
                <el-link>文章</el-link>
                <el-link>课程</el-link>
                <el-link>商城</el-link>
              </div>
              <div style="display: flex; gap: 10px;">
                <el-link>关于我们</el-link>
                <el-link>使用手册</el-link>
                <el-link>隐私条款</el-link>
                <el-link>建议反馈</el-link>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :lg="8">
            <div>
              <h2>联系我们</h2>
              <p>电话：13375526632</p>
              <p>邮箱：675786540@qq.com</p>
            </div>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</body>

<script>
  const App = {
    data() {
      return {
        productList: [
          { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: '../static/image/product01.png' },
          { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: '../static/image/product02.png' },
          { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: '../static/image/product03.png' },
          { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: '../static/image/product04.png' },
          { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: '../static/image/product05.png' },
          { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: '../static/image/product06.png' },
          { type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: '../static/image/product07.png' },
          { type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: '../static/image/product08.png' },
        ],
        cartItems: [], 
      };
    },
    methods: {
      addToCart(product) {
        const existingItem = this.cartItems.find((item) => item.name === product.name);
        if (existingItem) {
          existingItem.quantity += 1;
        } else {
          this.cartItems.push({ ...product, quantity: 1 });
        }
      },
    },
  };

  Vue.createApp(App).use(ElementPlus).mount("#app");
</script>

</html>